<template>
  <el-drawer :title="title" :visible.sync="visible" append-to-body class="drawer-container" width="600px">
    <el-form ref="form" :model="formdata" :rules="formrules" label-suffix="：" label-width="140px">
      <el-form-item label="任务名称" prop="jobName">
        <el-input v-model="formdata.jobName" placeholder="请输入任务名称"/>
      </el-form-item>
      <el-form-item label="任务分组" prop="jobGroup">
        <el-select v-model="formdata.jobGroup" placeholder="请选择任务分组" style="width: 100%;">
          <el-option v-for="dict in localDict.quartz_group" :key="dict.value" :label="dict.label"
                     :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="invokeTarget">
        <span slot="label">
          调用方法
          <el-tooltip placement="top">
            <div slot="content">
              Bean调用示例：ryTask.ryParams('ry')
              <br/>Class类调用示例：task.cn.hb.software.module.quartz.RyTask.ryParams('ry')
              <br/>参数说明：支持字符串，布尔类型，长整型，浮点型，整型
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </span>
        <el-input v-model="formdata.invokeTarget" placeholder="请输入调用目标字符串"/>
      </el-form-item>
      <el-form-item label="cron表达式" prop="cronExpression">
        <el-input v-model="formdata.cronExpression" placeholder="请输入cron执行表达式">
          <template slot="append">
            <el-button type="primary" @click="cron = true">
              生成表达式
              <i class="el-icon-time el-icon--right"></i>
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="执行策略" prop="misfirePolicy">
        <el-radio-group v-model="formdata.misfirePolicy" size="small">
          <el-radio-button v-for="item in localDict.quartz_strategy" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否并发" prop="concurrent">
        <el-radio-group v-model="formdata.concurrent" size="small">
          <el-radio-button label="true">允许</el-radio-button>
          <el-radio-button label="false">禁止</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="formdata.status">
          <el-radio-button v-for="item in localDict.quartz_status" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-dialog :show-footer="false" :visible.sync="cron" title="crontab" width="600px">
      <crontab :expression="formdata.cronExpression" @fill="crontabFill" @hide="cron=false"/>
    </el-dialog>
    <div class="drawer-footer">
      <el-button size="mini" :loading="loading" type="primary" @click="handleSubmit">确定</el-button>
      <el-button size="mini" type="info" @click="handleCancel">取消</el-button>
    </div>
  </el-drawer>
</template>
<script>
import {getOne, save} from "@/api/base";
import Crontab from "../../../../components/Crontab/index.vue";

export default {
  name: "QuartzModelCard",
  components: {Crontab},
  data() {
    return {
      title: '',
      cron: false,
      visible: false,
      loading: false,
      baseUrl: '/monitor/job/',
      formdata: {},
      localDict: {
        quartz_group: [],
        quartz_status: [],
        quartz_strategy: []
      },
      formrules: {
        jobName: [
          {required: true, message: "任务名称不能为空", trigger: "blur"}
        ],
        invokeTarget: [
          {required: true, message: "调用目标字符串不能为空", trigger: "blur"}
        ],
        cronExpression: [
          {required: true, message: "cron执行表达式不能为空", trigger: "blur"}
        ]
      }
    }
  },
  created() {
    this.getLocalDict()
  },
  methods: {
    getLocalDict() {
      this.getStaticData('system-quartz-group').then(res => {
        this.localDict.quartz_group = res.data
      })
      this.getStaticData('system-quartz-status').then(res => {
        this.localDict.quartz_status = res.data
      })
      this.getStaticData('system-quartz-strategy').then(res => {
        this.localDict.quartz_strategy = res.data
      })
    },
    handleAdd() {
      this.resetForm('form')
      this.formdata = {}
      this.visible = true
      this.title = "创建定时任务"
    },
    handleEdit(id) {
      this.resetForm('form')
      getOne(this.baseUrl, id).then(res => {
        this.formdata = res.data
        this.visible = true
        this.title = "修改定时任务"
      })
    },
    /** 确定后回传值 */
    crontabFill(value) {
      this.formdata.cronExpression = value;
    },
    /** 提交按钮 */
    handleSubmit: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          save(this.baseUrl, this.formdata).then(() => {
            this.$modal.msgSuccess("修改成功");
            this.visible = false;
            this.resetForm('form')
            this.$emit('ok')
          });
        }
      });
    },
    // 取消按钮
    handleCancel() {
      this.visible = false;
      this.resetForm('form')
    },
  }
}
</script>
<style scoped lang="scss">

</style>
